<template>
  <div class="c-bg-sgray c-p c-text-hidden" ref="bgHeight">
    <div class="c-w100 c-bg-white c-pz10 c-maxw640" id="tabFixed">
      <div class="c-pt14 c-bg-white">
        <new-search-bar :selectList="selectList" :searchText="searchText" @showWidth="showSearch" @search='startSearch' @cancel='hideSearch' @input="biindInput" bgSearch="c-bg-white"></new-search-bar>
      </div>
      <div class="">
        <div class="c-ph24 c-pt12 c-bg-white c-pb24">
          <my-small-tabbar :tabList="tabList" :tabIndex="type" :flexClass="'c-justify-start'" :isScroll="true" :tabNameClass="'c-fs24'" @changeTab="changeType" class="tabBar"></my-small-tabbar>
          <div v-if="type == 0" class="c-ws-n c-flex-row c-mt20">
            <div class="c-ph16 c-pv10 c-flex-row c-flex-center c-fs20 c-br10" @click="changeTab(0)" :class="tabIndex == 0 ? 'c-fc-white theme-bg' : 'c-bg-sgray c-fc-xblack'">普通用户</div>
            <div class="c-ph16 c-pv10 c-flex-row c-flex-center c-fs20 c-br10 c-ml10" @click="changeTab(1)" :class="tabIndex == 1 ? 'c-fc-white theme-bg' : 'c-bg-sgray c-fc-xblack'">会员</div>
            <div class="c-ph16 c-pv10 c-flex-row c-flex-center c-fs20 c-br10 c-ml10" @click="changeTab(2)" :class="tabIndex == 2 ? 'c-fc-white theme-bg' : 'c-bg-sgray c-fc-xblack'">服务商</div>
          </div>
        </div>
      </div>
      <!-- ratioType: 1抽成方式按现金百分比 && 列表数据不为0 && (直接关系 || 员工) && 不是服务商-->
      <div id="setScroll" class="c-pv24 c-fs22 c-flex-row c-aligni-center c-fc-gray c-ph24 c-bg-sgray c-w100" :class="isShowSet || (type == 0 && Number(l1SubNum) > 0) ? 'c-justify-sb' : 'c-justify-end'" v-if="teamInfo.ratioType == 1 && teamMember.length > 0 && (type == 0 || type == 3) && tabIndex !=2">
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs22 c-fc-gray c-mr20" @click="showDialog = true" v-if="type == 0 && Number(l1SubNum) > 0">总人数:{{l1SubNum}}人</div>
          <div class="c-fc-gray c-flex-row c-aligni-center" v-if="isShowSet">
            <div class="c-ws-n">已选{{staffArr.length}}人</div>
            <div class="c-hh28 c-fs20 c-ml10 c-br4 theme-bg-10 c-ph10" @click="showTeamNumber" v-if="chooseNumber">
              <div class="c-w100 c-h c-flex-row c-flex-center theme-fc c-ws-n c-br4">{{intervalStr(chooseNumber)}}</div>
            </div>
          </div>
        </div>
        <div class="c-ws-n" :class="isShowSet ? 'theme-fc' : 'c-fc-xblack'" @click="set"><span class="iconfont c-pr10 c-fs22">{{isShowSet ? '&#xe648;' : '&#xe61f;'}}</span>{{isShowSet ? '退出设置' : `批量设置${type== 0 ? '员工' : '比例'}`}}</div>
      </div>
    </div>
    <div id="scrollContent" class="c-scroll-touch c-contexty-scroll" @scroll="onScrollEvent">
      <div v-if="!(teamInfo.ratioType == 1 && teamMember.length > 0 && (type == 0 || type == 3) && tabIndex !=2) && type == 0 && Number(l1SubNum) > 0" class="c-fs22 c-fc-sblack c-ph24 c-mt24">总人数： {{l1SubNum}}人</div>
      <!-- isStaff: 1是员工, -1不是员工 -->
      <div class="c-ph24" :class="teamInfo.ratioType == 1 && teamMember.length > 0 && (type == 0 || type == 3) && tabIndex !=2 ? '':'c-pt24'">
        <div v-for="(item,index) in teamMember" :key="index" class="c-ph20 c-fs20 c-pb30 c-mb20 c-br15 c-bg-white" @click="goClassmateDetail(index,item.userId)" :class="(isClick || isSureboxCilck)&& item.selectStatus ? 'theme-bd2' : isShowSet == true && type == 0 && ((item.vipType ==3 || item.vipType > 4) || item.isStaff == 1)? 'c-opacity50 c-bd2-white imgCloseBig' : 'c-bd2-white'">
          <div :class="type == 3 ? 'c-pb20 c-bd-b1': ''" class="c-flex-row c-aligni-center">
            <div class="c-flex-row c-pt20 c-w0 c-flex-grow1">
              <img :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" alt="" class="c-hh80 c-ww80 c-brp50">
              <div class="c-w100">
                <div class="c-flex-row">
                  <span class="c-pl20 c-fw-b c-text-ellipsis1 c-lh40" :class="item.vipType==1 ? 'maxw360' : item.vipType==2 || item.vipType==4 ? 'maxw400' : 'c-maxw200'">{{item.nickname}}</span>
                  <identity-com class="c-pl10" :vipType="item.vipType"></identity-com>
                </div>
                <div class="c-flex-row c-justify-sb c-100 c-pl20 c-fc-gray">
                  <div class=" c-pr20">
                    <div class="c-pt16">ID: {{item.userId}}</div>
                    <div class="c-text-ellipsis1 c-pt16">姓名: {{!!item.realName ? item.realName : "--"}}</div>
                    <div class="c-pt16" v-if="type == 0 || (type==1 && teamInfo.enableLookIndirectMobile) || (item.mobile != -1 && type>=2)">电话: {{!!item.mobile ? item.mobile : '--'}}</div>
                    <div class="c-pt16">注册时间: {{item.createdAt}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="isShowSet&& ((type == 0 && item.isStaff < 1) || type == 3)">
              <span v-if="(isClick || isSureboxCilck)&& item.selectStatus">
                <span class="theme-bg c-ww28 c-hh28 c-brp50 c-flex-row c-flex-center">
                  <span class="iconfont c-fc-white">&#xe82c;</span>
                </span>
              </span>
              <span v-else class="iconfont">&#xe797;</span>
            </div>
          </div>
          <div v-if="type == 3" class="c-flex-row c-aligni-center c-justify-sb c-w100 c-pt20 c-ph12">
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计消耗名额</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{item.quota ? Number(item.quota).toFixed(0) : 0}}个</div>
            </div>
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计消耗金额</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{item.payMoney}}</div>
            </div>
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计收益</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{item.staffIncome}}</div>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无记录'"></loading-status-tem>
      </div>
    </div>
    <div class="c-flex-row c-ph24 c-aligni-center c-justify-sb c-hh80 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1 c-fs22" v-if="isShowSet && (type == 0 || type == 3)">
      <div v-if="type ==3 && teamInfo.staffNum > 1" @click="showTeamNumber">
        <div class="c-fs22 c-ws-n c-flex-row c-aligni-center">批量选择<span class="c-pl8 iconfont c-fs20">&#xe6a9;</span></div>
        <span class="c-hh20 c-fs16 c-br4 theme-bg-10 c-flex-row c-aligni-center theme-fc c-inlineblack c-ph4" v-if="chooseNumber">{{intervalStr(chooseNumber)}}</span>
      </div>
      <div class="c-pl20 c-pv12 c-hh60 c-bg-f6 c-br10 c-bg-f6 c-p" :class="type == 0 || (type == 3 && teamMember.length == 1) ? 'c-ww424' : 'c-ww332'">
        <input type="number" step="0.01" min="0" @keyup="staffRatio= staffRatio.match(/\d+(\.\d{0,2})?/) ? staffRatio.match(/\d+(\.\d{0,2})?/)[0] : ''" placeholder="输入员工分成比例" v-model="staffRatio" class="c-w100 minh30 c-h c-fs22">
        <div class="c-pa c-p-t16 c-p-r16">%</div>
      </div>
      <div class="theme-bg c-hh60 c-flex-row c-flex-center c-br10 c-fc-white" :class="type == 0 ? 'c-ww148' : 'c-ww104'" @click="setStaff">{{type == 0 ? '设为员工' : '确定'}}</div>
    </div>
    <div v-if="type == 3 && !isShowSet && teamInfo.enableInviteStaff == 1 && !isSearch" class="c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1 c-ph24 c-flex-row c-aligni-center">
      <div @click="showDialog = true" class="c-fs24 theme-fc">谁能成为员工？</div>
      <div @click="startCanvas" class="c-w0 c-flex-grow1 c-ml30 c-fs28 c-fc-white c-hh64 c-br32 theme-bg c-flex-row c-flex-center">邀请员工</div>
    </div>
    <div v-show="showMask" @click="showMask = false;" class="c-flex-row c-flex-center c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100 c-translucent-balck60">
      <img src="" class="c-w70 c-m-0auto" id="inviteImg" />
    </div>
    <div class="canvasWrap canvasBox" id="inviteCanvas">
      <img class="head-style" :src="$addXossFilter(userHeadImg, require('@/assets/defult_head.png'))" alt="">
      <div class="c-bg-white content-wrap c-p">
        <div class="c-textAlign-c fs28px c-fc-xblack">邀请您成为员工，一起参与推广</div>
        <img :src="staffQrCode" class="ww180px hh180px mt30px c-mlr-auto" alt="">
        <div class="c-textAlign-c fs26px c-fc-sblack mt16px">长按保存图片</div>
      </div>
    </div>
    <choose-team-number :isShowTeamNumber="isShowTeamNumber && teamInfo.staffNum > 1" @closeTeamNumber="closeTeamNumber" @sureTeamNumber="sureTeamNumber" :numberSection="teamInfo.staffNum" :pageIndex="chooseIndex" :chooseNumber="chooseInterval" :intervalPage="intervalPage"></choose-team-number>
    <cj-popup v-model="showDialog" round closeable >
      <div class="c-ww520 c-pt64 c-pb40 c-ph40">
        <div class="c-maxh500 c-contexty-scroll">
          <div class="c-fs26 c-fc-xblack c-fw600 c-textAlign-l">哪些人可以成为您的员工？</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-mt24 c-lh36">首先用户不能是服务商身份，其次：</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-lh36">1、您直推的用户，您可以主动将他设置为员工；</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-lh36">2、用户的直接推荐人不是您 ，但用户的代理商字段为空；即：用户不属于某个服务商旗下。您可以邀请他，他同意后成为您的员工；</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-lh36">3、用户的直接推荐人不是您 ，但用户的代理商字段是您；即：他属于您旗下间接推荐的用户。您可以邀请他，他同意后成为您的员工；</div>
          <div class="c-fs26 c-fc-xblack c-fw600 c-textAlign-l c-mt24">员工福利和作用？</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-mt24 c-lh36">在您的服务商金额和会员名额足够的情况下，当员工直接推荐用户购买系统产品，员工可以获得比普通用户更高的推广收益；这个收益比例，是由您设置的；而您因为有了这些员工的助力推广，获客更多，也更快回笼资金；实现双赢的目的。</div>
          <div class="c-fs26 c-fc-xblack c-fw600 c-textAlign-l c-mt24">员工推广收益比例？</div>
          <div class="c-fs24 c-fc-gray c-textAlign-l c-mt24 c-lh36">{{teamInfo.initStaffRatio}}%，剩下的收益归您所有。</div>
        </div>
        <div @click="showDialog = false" class="c-fs24 c-fc-white c-ww150 c-hh48 c-flex-row c-flex-center theme-bg c-br24 c-mt32 c-mlr-auto">知道了</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import mySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import { utilJs } from "@/utils/common.js"
import chooseTeamNumber from "@/components/templates/chooseTeamNumber.vue";
import identityCom from "@/components/templates/common/identityCom.vue";
let pageIndex = 1;
let html2canvas = null;
export default {
  name: 'MyTeamList',
  components: {
    loadingStatusTem,
    newSearchBar,
    chooseTeamNumber,
    mySmallTabbar,
    identityCom
  },
  props: [],
  beforeCreate() {
  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      customName: JSON.parse(localStorage.getItem("customName")),
      dataStatus: 'HAS_MORE_DATA',
      selectList: [["昵称", "姓名", "ID", "电话"]],
      nickname: "",
      level: 1, //1直接关系;6间接关系;4服务商;5员工
      mobile: "",
      realName: "",
      userId: "",
      teamInfo: "",
      type: 0,
      teamMember: [],
      enableLookIndirect: '', //是否显示间接关系
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      chooseType: 0, // 默认近7天，2。一个月 -2 上个月
      timeKind: ["7天", "本月", "上个月"],
      searchText: '',
      isShowSet: false, //是否显示设置, false未开启设置
      isClick: false, //false未点击, 无选中样式
      staffRatio: '', //员工比例
      staffArr: [], //选中的员工数组
      isShowTeamNumber:false, //是否显示批量选择弹框
      chooseNumber:'', //选中的区间
      isSureboxCilck: false, //确认批量选择按钮
      chooseIndex: 0, //批量选择中,选中框索引
      chooseInterval: "", //弹框区间
      intervalPage: 1, //传给批量框页数
      tabList: [],
      tabIndex: 0, //0普通用户, 1会员, 2服务商
      directType: 1, //1普通用户, 2会员, 3服务商
      l1SubNum: 0,
      showMask: false,
      staffQrCode: '',
      userHeadImg: localStorage.getItem("userHeadImg"),
      showDialog: false,
      isSearch: false
    }
  },
  mounted() {},
  computed: {
    cloroRGB() {
      return utilJs.getRgbStr(this.themeColor, '', 0.5);
    }
  },
  filters: {
  },
  methods: {
    onScrollEvent(e) {
      let element = document.getElementById('scrollContent');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.teamMember.length > 0) {
          this.getTeamInfo();
        }
      })
    },
    initScrollHeight() {
      this.$nextTick(() => {
        let windowHeight = window.innerHeight;
        let tabFixedHeight = document.getElementById('tabFixed') && document.getElementById('tabFixed').clientHeight || '';
        let navTopHeight = document.querySelector('.nav') && document.querySelector('.nav').clientHeight || '';
        let scrollContentHeight = windowHeight - tabFixedHeight - navTopHeight;
        document.querySelector("#scrollContent").style.height = scrollContentHeight + 'px';
        console.log(tabFixedHeight)
      })
    },
    getInviteStaffQrCode() {
      utilJs.getMethod(global.apiurl + "Agent/getInviteStaffQrCode", res => {
        this.staffQrCode = 'data:image/svg+xml;base64,' + window.btoa(decodeURIComponent(encodeURIComponent(res.imgUrl)));
      }, failRes => {
      })
    },
    startCanvas() {
      let domTest = document.getElementById("inviteCanvas");
      if (!domTest) {
        return;
      }
      this.$loading.show({
        text: "分享图片生成中"
      });
      html2canvas(domTest, { useCORS: true, backgroundColor: 'rgba(0, 0, 0, 0)' }).then(canvas => {
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.getElementById("inviteImg") && document.getElementById("inviteImg").setAttribute("src", dataURL);
        this.showMask = true;
        this.$loading.hide();
      } catch (err) {
        this.$loading.hide();
        console.log(err.message);
        console.log(err.stack);
      }
    },
    //显示选择区间弹窗
    showTeamNumber() {
      this.isShowTeamNumber = true
    },
    //确认区间
    sureTeamNumber(page, chooseNumber, isShowTeamNumber, chooseIndex) {
      this.isShowTeamNumber = false;
      this.isSureboxCilck = true;
      pageIndex = page;
      this.intervalPage = page;
      this.chooseIndex = chooseIndex;
      this.chooseNumber = chooseNumber;
      this.chooseInterval = chooseNumber;
      this.userId = "";
      this.nickname = "";
      this.realName = "";
      this.mobile = "";
      this.staffArr = [];
      this.teamMember = [];
      this.getTeamInfo();
    },
    reGetData() {
      pageIndex = 1;
      this.teamMember = [];
      this.getTeamInfo()
    },
    closeTeamNumber() {
      this.isShowTeamNumber = false
    },
    intervalStr(str) {
      return str.toString().indexOf("-") > -1 ? `区间${str}` : str;
    },
    //绑定搜索框的值，切换时清空
    biindInput(e) {
      this.searchText = e.searchValue
    },
    showSearch() {
      this.isSearch = true;
    },
    hideSearch(data) {
      this.isSearch = false;
      this.startSearch(data)
    },
    startSearch(data) {
      window.scrollTo(0, 0)
      this.staffArr = [];
      // 点击搜索
      let si = data.selectItem;
      this.userId = "";
      this.chooseNumber = "";
      this.nickname = "";
      this.realName = "";
      this.mobile = "";
      if (si == '昵称') {
        this.nickname = data.searchValue;
      } else if (si == '姓名') {
        this.realName = data.searchValue;
      } else if (si == 'ID') {
        this.userId = data.searchValue;
      } else if (si == '电话') {
        this.mobile = data.searchValue;
      }
      this.teamInfo = "";
      this.chooseIndex = 0;
      this.reGetData();
    },
    getTeamInfo() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // 员工批量选择100为一个区间, 所以limit传100
      let limit = this.type == 3 ? 100 : 10
      this.l1SubNum = 0;
      utilJs.getMethod(global.apiurl + "members/followers?from=2&page=" + pageIndex + "&level=" + this.level + "&nickname=" + this.nickname + "&mobile=" + this.mobile + "&userId=" + this.userId + "&realName=" + this.realName + "&sort=0" + "&limit=" + limit + "&directType=" + this.directType, res => {
        this.teamInfo = res;
        this.l1SubNum = res.l1SubNum;
        this.enableLookIndirect = res.enableLookIndirect;
        if (this.enableLookIndirect == 1 && this.companyAuth.enableClassmate > 1) {
          this.tabList = [{
            index: 0,
            title: `直推用户(${this.teamInfo.l1Num})`
          }, {
            index: 1,
            title: `间推用户(${this.teamInfo.indirectNum})`
          }, {
            index: 2,
            title: this.customName.serviceProviderName + `(${this.teamInfo.agentNum})`
          }, {
            index: 3,
            title: `员工(${this.teamInfo.staffNum})`
          }]
        } else {
          this.tabList = [{
            index: 0,
            title: `直推用户(${this.teamInfo.l1Num})`
          }, {
            index: 2,
            title: this.customName.serviceProviderName + `(${this.teamInfo.agentNum})`
          }, {
            index: 3,
            title: `员工(${this.teamInfo.staffNum})`
          }]
        }
        if (this.isSureboxCilck && this.isShowSet) {
          if (this.chooseNumber.toString().indexOf("-") > -1) {
            //比如总员工101人, 有1-100, 101两区间, 选中1-100区间
            let selectLength = this.chooseNumber.split("-")[1] - this.chooseNumber.split("-")[0] + 1
            if (this.staffArr.length < selectLength) {
              res.data.data.forEach((item, i) => {
                this.$set(res.data.data[i], 'selectStatus', true);
                this.staffArr.push(item.userId);
              });
            }
          } else {
            // 比如选中101
            res.data.data.forEach((item, i) => {
              this.$set(res.data.data[i], 'selectStatus', true);
              this.staffArr.push(item.userId);
            });
          }
        } else {
          // 取消选中员工
          res.data.data.forEach((item, i) => {
            this.$set(res.data.data[i], 'selectStatus', false);
          });
        }
        if (pageIndex == 1) {
          this.teamMember = res.data.data;
        } else {
          this.teamMember = [...this.teamMember, ...res.data.data];
        }
        if (res.data && res.data.data.length < 10) {
          this.dataStatus = (pageIndex == 1 || this.isSureboxCilck) && res.data.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
        this.initScrollHeight();
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    changeType(index) {
      window.scrollTo(0, 0)
      if (index == 0) {
        this.level = index + 1;
      } else if (index == 1) {
        this.level = index + 5;
      } else if (index == 2) {
        this.level = index + 2;
      } else {
        this.level = index + 2;
      }
      this.directType = index == 0 ? 1 : '';
      this.tabIndex = 0;
      this.chooseNumber = "";
      this.chooseIndex = 0;
      this.type = index;
      this.isClick = false;
      this.isShowSet = false;
      this.isSureboxCilck = false;
      this.staffArr = [];
      this.reGetData();
    },
    goClassmateDetail(index, userId) {
      if (this.isShowSet || this.isSureboxCilck) {
        this.isClick = true;
        // this.userId = userId;
        if (this.staffArr.includes(userId)) {
          // staffArr已存在userId(已选),再次点击该用户即取消选中
          this.teamMember[index].selectStatus = false;
          this.staffArr = this.staffArr.filter(function (ele) {return ele != userId});
        } else {
          if (this.staffArr.length > 99) {
            this.$showCjToast({
              text: "最多支持选择100个用户",
              type: "warn"
            });
            return ;
          }
          this.teamMember[index].selectStatus = true;
          this.staffArr.push(userId);
        }
        if (this.staffArr.length > 100) {
          this.$showCjToast({
            text: "最多支持选择100个用户",
            type: "warn"
          });
          return ;
        }
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/agent/classmateDetail",
          query: {
            userId: userId,
            userType: this.type,
          }
        })
      }
    },
    set() {
      this.isShowSet = !this.isShowSet;
      this.chooseIndex = 0;
      this.chooseNumber = "";
      // 点退出设置
      if (!this.isShowSet) {
        this.staffArr = []
        this.teamMember.forEach((item, i) => {
          this.$set(this.teamMember[i], 'selectStatus', false);
        });
        // 点过确认批量选择
        if (this.type == 3 && this.isSureboxCilck) {
          this.isSureboxCilck = false; // 不为批量设置时,可单独进入某用户详情页
          this.reGetData();
        }
      }
    },
    setStaff() {
      if (this.staffArr.length == 0) {
        this.$showCjToast({
          text: "请选择员工",
          type: "warn",
        });
        return;
      } else if (this.staffRatio == '') {
        this.$showCjToast({
          text: "请输入员工比例",
          type: "warn",
        });
        return;
      } else if (this.staffRatio < 0) {
        this.$showCjToast({
          text: `员工的抽成比例不能低于0`,
          type: "warn",
        });
        return;
      } else if (this.staffRatio > 100) {
        this.$showCjToast({
          text: "员工的抽成比例不能大于100%",
          type: 'warn',
        });
        return;
      }
      // 还有个一级比例判断
      let option = this.type == 0 ? 1 : 2;
      utilJs.postMethod(`${global.apiurl}members/batchSetStaff`, {userListId: this.staffArr, staffRatio: this.staffRatio, option}, res => {
        this.staffArr = [];
        this.$showCjToast({
          text: "设置成功",
          type: "success",
        });
        this.level = this.type == 0 ? 1 : 5;
        this.isSureboxCilck = false;
        this.userId = "";
        this.staffRatio = "";
        this.isShowSet = false;
        this.isClick = false;
        this.reGetData();
        // 可能只要设置这个
        // this.staffRatio = "";
      })
    },
    changeTab(index) {
      this.tabIndex = index;
      this.directType = index + 1;
      this.isShowSet = false;
      this.isClick = false;
      this.staffArr = [];
      this.reGetData();
    },
    //分享
    wechatShare: function () {
      let title = `升级${this.customName.serviceProviderName}`;
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/agent/agentIndex?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = `升级${this.customName.serviceProviderName}`;
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/agent/agentIndex?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.teamMember.length > 0) {
          this.getTeamInfo()
        }
      });
    },
  },
  activated() {
    setDocumentTitle("我的团队");// eslint-disable-line
    this.customName = JSON.parse(localStorage.getItem("customName"));
    pageIndex = 1;
    this.staffArr = [];
    this.dataStatus = 'HAS_MORE_DATA';
    this.searchAfterShow = true;
    this.isShowSet = false;
    this.isClick = false;
    this.isSureboxCilck = false;
    this.staffRatio = "";
    this.teamInfo = "";
    this.nickname = "";
    this.level = 1;
    this.tabIndex = 0;
    this.mobile = "";
    this.realName = "";
    this.userId = "";
    this.chooseNumber = "";
    this.chooseInterval = "";
    this.enableLookIndirect = "";
    this.conditionType = 1;
    this.intervalPage = 1;
    this.directType = 1;
    this.chooseIndex = 0;
    this.type = Number(this.$route.query.type) || 0;
    if (this.type == 3) {
      this.level = 5;
    }
    this.chooseType = 0
    this.searchText = ''
    this.teamMember = [];
    this.l1SubNum = 0;
    this.showMask = false;
    this.showDialog = false;
    this.isSearch = false;
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
      this.getTeamInfo();
      this.getInviteStaffQrCode();
    })
    this.wechatShare();
    // window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    // window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.maxw360 {
  max-width: 9rem;
}
.maxw400 {
  max-width: 10rem;
}
.fc-black {
  color: #000;
}
.minh30 {
  min-height: 0.75rem;
}
input {
  border: 0;
  background: none;
  outline: none;
}
.pt234{padding-top: 5.85rem}
.pt240{padding-top: 6rem;}
.pt252{padding-top: 6.3rem;}
.pt304{padding-top: 7.6rem;}
.pt312{padding-top: 7.8rem;}
.tabBar >>> .fs20 {
  font-size: 0.5rem !important;
}
.tabBar >>> .fs22 {
  font-size: 0.55rem !important;
}
.canvasWrap {
  padding-top: 60px;
  background: rgba(0, 0, 0, 0);
}
.content-wrap {
  width: 500px;
  border-radius: 20px;
  padding-top: 80px;
  padding-bottom: 40px;
}
.mt30px {
  margin-top: 30px;
}
.fs28px {
  font-size: 28px;
}
.ww180px {
  width: 180px;
}
.hh180px {
  height: 180px;
}
.mt16px {
  margin-top: 16px;
}
.head-style {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  z-index: 999;
}
.canvasBox {
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
</style>